<template>
	<view class="container">
		<!-- F1: 用户名输入框组 -->
		<view class="input-group">
			<input class="input" placeholder="用户名" />
			<uni-icons type="person-filled" size="24" color="#666"/>
		</view>
		<!-- F2: 密码输入框组 -->
		<view class="input-group">
			<!-- 注意：小程序/uni-app中的input的type没有password选项 -->
			<input class="input" :password="hidePwd" placeholder="登录密码" />
			<uni-icons @click="hidePwd = !hidePwd" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" size="24" color="#666"/>   
		</view>
		<!-- F3: 邮箱输入框组 -->
		<view class="input-group">
			<input class="input" placeholder="邮箱" />
			<uni-icons type="email-filled" size="24" color="#666"/>
		</view>
		<!-- F4: 电话输入框组 -->
		<view class="input-group">
			<input class="input" placeholder="电话" />
			<uni-icons type="phone-filled" size="24" color="#666"/>
		</view>
		<!-- F5: 注册按钮 -->
		<button class="btn" type="primary">注 册</button>
		<!-- F6: 跳转去登录 -->
		<text class="jumpToComponent" @click="$emit('showChild', {childName:'login'})">已有账号？现在去登录</text>
	</view>
</template>  

<script>
	import {userRegister} from '@/service'
	export default {
		data(){
			return {
				hidePwd: true,			//是否隐藏密码
			}
		},
		//生命周期方法 —— 组件（不是页面）挂载时
		mounted() {
			//修改导航条中的标题
			uni.setNavigationBarTitle({
				title: '注册新用户'
			})
		},
		methods: {
			async doRegister(){
				//请求数据
				let data = {uname:'test01', upwd:'123456', email:'test01@tedu.cn', phone:'13501234567'}
				//调用接口方法
				let body = await userRegister(data)
				console.log(body)
			}
		}
	}
</script>

<style lang="scss">
.container {
	//定位方式：绝对定位 —— 不占布局空间，这样一来一行中就可以同时出现“登录”和“注册”
	position: absolute;
	width: 100%;
	padding: $uni-spacing-col-lg*2 $uni-spacing-row-lg*2;
	.input-group {
		flex-direction: row;		//弹性容器主轴方向为：横向
		align-items: center;		//子元素在交叉轴上居中对齐
		border-bottom: $uni-border-width $uni-border-style $uni-border-color;//下边框
		padding: $uni-spacing-col-base $uni-spacing-row-base;
		margin-top: $uni-spacing-col-lg;
		.input { flex: 1; }
		.separator { margin: 0 $uni-spacing-row-base;}
	}
	.btn {
		width: 100%;
		height: 36px;
		margin-top: $uni-spacing-col-lg*2;
		background-color: $uni-color-primary;
		border-radius: 18px;
		font-size: $uni-font-size-base;
	}
	.jumpToComponent {
		margin-top: $uni-spacing-col-lg*3;
		&:active {
			opacity: $uni-opacity-half;
		}
	}
}
</style>